<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码 - ViTe博客管理后台</title>
    <link rel="stylesheet" href="css/login_style.css">
</head>
<body>

<form class="form" method="post" id="reset-password-form" autocomplete="off">
    <div class="form-inner">
        <h2>找回密码</h2>
        <p>请输入您的电子邮件地址，我们将发送一个链接来重置您的密码。</p>
        <div class="input-wrapper">
            <label for="reset-email">电子邮件地址</label>
            <div class="input-group"><span class="icon">
          <svg viewBox="0 0 24 24">
            <path d="M20,4A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H20M20,6H4V18H20V6Z"></path>
          </svg></span>
                <input type="email" id="reset-email" name="email" required data-lpignore="true">
            </div>
        </div>
        <div class="btn-group">
            <button class="btn btn--primary" type="submit">发送重置链接</button>
        </div>
        <!-- 添加返回登录页面的链接 -->
        <div class="btn-group">
            <a class="btn btn--secondary" href="login.html">返回登录</a>
        </div>
    </div>
</form>

<div style="text-align:center;">
</div>

<script>
    document.getElementById('reset-password-form').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var email = document.getElementById('reset-email').value; // 获取电子邮件地址

        // 定义电子邮件验证的正则表达式
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        // 检查电子邮件格式是否正确
        if (!emailRegex.test(email)) {
            alert('请输入有效的电子邮件地址。');
            return; // 如果电子邮件格式不正确，则停止执行后续代码
        }

        // 使用 fetch API 发送请求
        fetch('/reset-password-request', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: 'email=' + encodeURIComponent(email) // 将电子邮件地址编码为表单数据
        })
            .then(response => {
                if (response.ok) {
                    // 请求成功，显示提示信息
                    alert('重置链接已发送，请检查您的电子邮件。');
                    // 用户点击确认后，跳转到登录页面
                    window.location.href = 'login.html';
                } else {
                    // 请求失败，处理错误
                    return response.json(); // 假设服务器返回 JSON 格式的错误信息
                }
            })
            .then(data => {
                if (data) {
                    // 显示服务器返回的错误消息
                    alert('错误: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // 可以在这里显示一个错误消息
                alert('请求失败，请稍后再试。');
            });
    });
</script>



</body>


</html>
